<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
var host = document.domain+':8383';
$(function(){
	$('#main,#pos').css({width:$(window).width(),height:$(window).height()});

	var positionX = $(window).width() / 2; //角色位置，起始为中心
	var positionY = $(window).height() / 2; //角色位置，起始为中心
	var bPositionX = positionX;  //角色移动之前的位置
	var bPositionY = positionY;  //角色移动之前的位置

	var socket=null;
	gotoPosition();
	
	$('#main').click(function(e){
		//记录当前的角色的位置作为移动之前的位置记录
		bPositionX = parseFloat($('#persona'+cid).css('left'));
		bPositionY = parseFloat($('#persona'+cid).css('top'));

		//移动之后角色的位置
		positionX = e.pageX - 50;
		positionY = e.pageY - 60;
		
		gotoPosition();
	});

	var cid = '';//persona111
	function gotoPosition(){
		//如果背景不能移动了再移动角色
		$('#persona'+cid).animate({left:positionX,top:positionY},1000);

		//调整角色方向
		var deg = 0;
		if(positionX < bPositionX){
			deg = 180;
		}

		$('#persona'+cid+' img').css('transform','rotateY('+deg+'deg)');
		

		//发送坐标到服务器
		if(socket !== null && cid != ''){
			socket.send('{"type":"gotoPosition","x":"'+positionX+'","y":"'+positionY+'","cid":"'+cid+'","deg":"'+deg+'","name":"'+$('#cname').val()+'"}'); 
		}

		//移动背景
		//$('#main').animate({'backgroundPositionX':bgPositionX+'px','backgroundPositionY':bgPositionY+'px'},1000);
	}

	function setPosition(cid,x,y,name,deg){
		if($('#persona'+cid).length <= 0){
			creatPersona(cid,x,y,name);
			return;
		}
		
		$('#persona'+cid+' img').css('transform','rotateY('+deg+'deg)');
		$('#persona'+cid).animate({'left':x+'px','top':y+'px'},1000);
	}

	function creatPersona(cid,x,y,name){
		$('body').append('<div id="persona'+cid+'" style="left:'+x+'px;top:'+y+'px;" class="persona"><div class="persona_name">'+name+'</div><img src="images/persona.png" ></div>');
	}

	function deletePersona(cid){

		setContent('系统','角色['+$('#persona'+cid+' .persona_name').text()+']下线。');
		$('#persona'+cid).remove();
	}

	$('#start').click(function(){
		var cname = $('#cname').val();
		if(cname == ''){
			alert('请输入名称');
			return;
		}

		$('#pos').hide();
		try{
			socket = new WebSocket('ws://'+host);

			
			socket.onopen = function(){
				socket.send('{"type":"newPersona","x":"'+positionX+'","y":"'+positionY+'","name":"'+cname+'"}');
			}

			socket.onmessage = function(event) { 
			    var message = eval('('+event.data+')');
			    console.log(message.cid)
			    switch(message.type){
			    	case 'setCid':
				    	cid = message.cid;
				    	break;
			    	case 'setPosition':
			    		setPosition(message.cid,message.x,message.y,message.name,message.deg);
			    		break;
			    	case 'newPersona':
			    		setPosition(message.cid,message.x,message.y,message.name,message.deg);
			    		setContent('系统','新角色['+message.name+']上线。');
			    		break;
			    	case 'deletePersona':
			    		deletePersona(message.cid);
			    		break;
			    	case 'ping':
			    		socket.send('{"type":"ping"}');
			    		break;
			    	case 'setContent':
			    		setContent(message.name,message.content);
			    }
			}; 

			socket.onclose = function(event){
				$('.persona').remove();
				$('#pos').show();
				alert('与服务器断开');
			}
		}catch(e){
			alert(e.name + ": " + e.message);
		}
	});	

	function setContent(name,content){
		$('#content').append('<div class="row"><span>['+name+']</span>'+content+'</div>');
	}

	$('#submitContent').click(function(){
		if($('#contentValue').val() == ''){
			alert('请输入内容');
			return;
		}
		if(socket !== null){
			socket.send('{"type":"setContent","content":"'+$('#contentValue').val()+'","name":"'+$('#cname').val()+'"}');
			$('#contentValue').val('');
		}
	});
});
</script>
<style type="text/css">
	body{
		margin:0;
		padding:0;
		overflow: hidden;
	}
	
	#main{
		background-color: #ccc;
		background-image: url(images/bg.jpg);
		background-repeat: no-repeat;
		background-size:100% 100%;
		overflow: hidden;
	}
	
	#pos{
		position: absolute;
		background-color: rgba(0,0,0,0.8);
		left:0;
		top:0;
		z-index: 10;
	}
	
	.persona{
		width:60px;
		height:70px;
		position: absolute;
		z-index: 8;
		left:50%;
		top:50%;
		
	}
	
	.persona img{
		transform:rotateY(180deg);
		width:60px;
		height:70px;
	}
	
	#init_input{
		width:100%;
		height:200px;
		text-align: center;
		margin-top:200px;
		color:#fff;
	}
	
	.persona_name{
		width:100%;height:30px; text-align: center; line-height: 30px; color:#f00;font-weight: bold;
	}
	
	#content{
		width:500px;
		height:300px;
		background-color: rgba(0,0,0,0.3);
		position: absolute;
		left: 0;
		bottom:0;
		cursor: pointer;
		overflow: scroll;
		z-index: 9;
	}
	
	#content .row{
		width:100%;
		height:30px;
		line-height: 30px;
		font-size: 14px;
		color:#fff;
		text-indent: 2em;
	}
	
	#content .row span{
		color:#f00;
	}
</style>
</head>
<body>
	<div id="pos"><div id="init_input">请输入名称：<input id="cname" /><input id="start" type="button" value="开始" /></div></div>
	<div id="main"></div>
	<div id="content">
		<input id="contentValue" /><input id="submitContent" type="button" value="发送" />
	</div>
</body>
</html>